<script setup lang="ts">
import axios from "axios";
import {computed, onMounted, reactive, ref} from "vue";
import PileUpView from "@/components/PileUp.vue";
import TimeLineView from "./TimeLineView.vue";

const line_data = reactive([]);
const line_tile = ref('国内部分城市污染物AQI值');
const line_type = ref('line');

const timeline_data = reactive([]);

function getData() {
  axios.get("/api/ChinaCity/pileUp").then((response) => {
    line_data.value = response.data;
  });
  axios.get("/api/ChinaCity/timeLine").then((response) => {
    timeline_data.value = response.data;
  });
}

const line_option = computed(() => {
  return line_data.value;
});
const timeline_option = computed(() => {
  return timeline_data.value;
});
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="chart-data-view" style="height: 100%;">
    <div class="chart-dv-full-screen-container" style="height: 100%;">
      <div class="chart-row" style="height: 100%;">
        <div class="chart-col" style="height: 50%;">
          <pile-up-view :chart_option="line_option" :title="line_tile" :type="line_type" v-if="line_data.value"/>
        </div>
        <div class="chart-col" style="height: 50%;">
          <time-line-view :chart_option="timeline_option" v-if="timeline_data.value"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/scss_variable.scss";
</style>